import { useState, useEffect } from "react";
import { Input, Button, Upload, Modal, Checkbox } from "antd";
import type { UploadProps, CheckboxProps } from "antd";
import { RightOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
import { request } from "../../common/request";
import { urls } from "../../common/urls";
import "./index.less";

function SelectUser({ isShow, getChecks, setIsModalOpen, title = '选择好友', okText = '确认' }: any) {
    const [friend, setFriend] = useState([]);
    const [value, setValue] = useState('');
    const [friendChecks, setFriendChecks]: any = useState([]);
    const [changeUser, setChangeUser] = useState([])

    const handleSearch = (e: any) => {
        const searchValue = e.target.value
        if (!searchValue) {
            return;
        }
        request({
            method: "post",
            data: {
                method: urls.selectUser,
                key: searchValue
            },
        }).then((res: any) => {
            const list = res.data;
            const result = list
                .filter((x: any) => x.child.length)
                .map((m: any) => m.child).flat(2);
            setFriend(result);
        });
    };
    const handleCheckUser = (x: any) => {
        const { f_uid } = x;
        let checked = friendChecks;
        if (checked.includes(f_uid)) {
            const i = checked.indexOf(f_uid)
            checked = checked.slice(0, i).concat(checked.slice(i + 1));
        }
        else {
            checked.push(f_uid);
        };
        setChangeUser(checked);
    };


    const handleCancel = () => {
        setIsModalOpen(false);
        setFriendChecks([]);
        getChecks([], '');
        setValue('');
    };

    const handleOk = () => {
        setIsModalOpen(false);
        setFriendChecks(changeUser);
        const names = friend.filter((x: any) => friendChecks.includes(x.f_uid)).map((m: any) => m.name)
        getChecks(changeUser, names?.join(','));
        setValue('');
    };

    useEffect(() => {
        setFriendChecks([]);
    }, [isShow])


    return (
        <>
            <Modal
                title={title}
                className="add-user-model"
                open={isShow}
                okText={okText}
                cancelText="取消"
                onCancel={handleCancel}
                onOk={handleOk}
            >
                <div className="add-user-model-main">
                    <Input
                        placeholder="搜索"
                        value={value}
                        prefix={<SearchOutlined />}
                        onChange={(e: any) => setValue(e.target.value)}
                        onPressEnter={handleSearch}
                    />
                    <div className="user-list-model">
                        {
                            friend.map((x: any, i: number) => {
                                return (
                                    <div className="user-list-model-item" key={i}>
                                        <Checkbox onChange={() => handleCheckUser(x)} />
                                        <img
                                            src={x.avatar}
                                            alt=""
                                        />
                                        <p>{x.name}</p>
                                    </div>
                                );
                            })
                        }
                    </div>
                </div>
            </Modal>
        </>
    );
}
export default SelectUser;
